.arrow {
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
   border-color: inherit;
   border-style: solid;
   transform: rotate(45deg);
   border-width: 1px;
}
.popper {
   @apply absolute bg-white border border-gray-200 rounded shadow-sm z-10 min-w-36 right-0;
}

.popper-wrapper.left .arrow {
   top: 4px;
   right: -4px;
   border-left-color: transparent;
   border-bottom-color: transparent;
}
.popper-wrapper.left .popper {
   margin-right: calc(100% + 8px);
   top: 0;
}

.popper-wrapper.left-bottom .arrow {
   top: -4px;
   right: 4px;
   border-right-color: transparent;
   border-bottom-color: transparent;
}
.popper-wrapper.left-bottom .popper {
   margin-top: 4px;
}
